<template>
	<view class="wrap beijing fc-h">
		<view class="header-box-wrap">
			<view class="header-height"></view>
			<view class="header-box w750">
				<view class="title fcc">注册</view>
				<view class="btn-return" @click="goBack"></view>
			</view>
		</view>

		<view class="flex1 fc-h">
			<view class="loging-logo">
				<image src="../../static/d211bd1765a6b9715b8ba8c4812e754a.png" alt=""></image>
			</view>
			<view class="login-form reg-form">
				<view class="input-row input-user">
					<view class="icon fcc">
						<image src="../../static/img/ipt-user.png" alt=""></image>
					</view>
					<u-input v-model="phoneNumber" type="text"  maxlength="11" placeholder="请输入手机号" />
				</view>

				<view class="input-row input-code">
					<view class="icon fcc">
						<image src="../../static/img/ipt-code.png" alt=""></image>
					</view>
					<u-input v-model="captcha" type="text"   maxlength="4" placeholder="请输入图形验证码" />
					<view class="code fcc">
						<img :src="captchaImageUrl" @click="refreshCaptcha" alt="验证码,看不清楚?请点击刷新验证码" border="1"
							class="click" width="120px"></img>
					</view>
				</view>

				<view class="input-row input-pwd">
					<view class="icon fcc">
						<image src="../../static/img/ipt-pwd.png" alt=""></image>
					</view>
					<u-input v-model="password" type="password" placeholder="请输入密码" />
				</view>

				<view class="input-row input-pwd">
					<view class="icon fcc">
						<image src="../../static/img/ipt-pwd.png" alt=""></image>
					</view>
					<u-input v-model="confirmPassword" type="password" placeholder="请再次确认密码" />
				</view>

				<view class="input-row input-yqm">
					<view class="icon fcc">
						<image src="../../static/img/ipt-yqm.png" alt=""></image>
					</view>
					<u-input v-model="inviteCode" placeholder="请输入邀请码" />
				</view>
				<view @click="registerUser" class="btn-blue fcc">立即注册</view>
			</view>
		</view>

		<view class="foot-links fcc" style="width: 90%;justify-content: space-around;: ;">
			<view class="fcc">
				<image src="../../static/img/img-appdown.png" alt=""></image>
				<text>APP下载</text>
			</view>
			<view class="fcc" @tap="golog">
				<image src="../../static/img/img-login.png" alt=""></image>
				<text>直接登录</text>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phoneNumber: '',
				captcha: '',
				password: '',
				confirmPassword: '',
				inviteCode: '',
				captchaImageUrl: '', // 图形验证码的URL
				uToast: ''
			};
		},
		created() {
			this.getcapth()
		},
		methods: {
			getcapth() {
				this.$request.get('/CatUser/captcha', {})
					.then(res => {
						// 处理请求成功的情况
						console.log(res);
						this.captchaImageUrl = 'data:image/jpeg;base64,' + res.data.captchaImage;
					})
					.catch(error => {
						// 处理请求失败的情况
						console.error('GET request failed:', error);
					});
			},
			registerUser() {
				const param = {
					phoneNumber: this.phoneNumber,
					password: this.password,
					confirmPassword: this.confirmPassword,
					inviteCode: this.inviteCode,
					captcha: this.captcha
				}
				this.$request.post('/CatUser/register', param)
					.then(res => {
						// 处理请求成功的情况
						console.log(res);
						if (res.code === 200) {
							
							this.$refs.uToast.show({
								type: 'success',
								title: '成功主题(带图标)',
								message: res.message,
								iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
							})
						    const userData=res.data.newUser
							const token = res.token;
							this.$store.dispatch('setUser', userData);
							if(this.$store.state.cattoken==null){
								 this.$store.commit('setVuexToken',token)	
							}
							uni.switchTab({
								url: '/pages/tabBar/my/index'
							});
						
						} else {
							this.$refs.uToast.show({
								type: 'error',
								icon: false,
								title: '失败主题',
								message: res.message,
								iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'

							})
						}
					})
			},
			goBack() {
				// 返回上一页的逻辑
				uni.navigateBack({
					delta: 2
				});
			},
			refreshCaptcha() {
				// 刷新验证码图片的逻辑
				this.getcapth()
			},
			register() {
				// 注册逻辑，可以在这里发送注册请求

			},
			golog() {
				uni.redirectTo({
					url: '/pages/login/index'
				});
			}
		},
	};
</script>

<style scoped>
	/* 在这里添加页面样式 */
</style>